<!-- 申請分銷商 -->
<template>
	<view class="apply-commission-wrap">
		<!-- 標題欄 -->
		<view class="head-box" :style="{ backgroundImage: ' url(' + formHeadImg + ')' }">
			<shopro-navbar back-icon-color="#fff" :background="{}"></shopro-navbar>
		</view>

		<!-- 表單 -->
		<view class="apply-form">
			<u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType">
				<block v-for="(form, index) in formList" :key="index">
					<u-form-item v-if="form.type === 'input'" :labelStyle="labelStyle" 　 label-width="150"
						label-position="left" :label="form.name" :prop="`value${index}`">

						<u-input :disabled="!hasPostBtn" :placeholder="`請輸入${form.name}`"
							:placeholderStyle="placeholderStyle" v-model="model['value' + index]" type="text"></u-input>

					</u-form-item>
					<u-form-item v-if="form.type === 'number'" :labelStyle="labelStyle" label-position="left"
						:label="form.name" :prop="`value${index}`" label-width="150">
						<u-input :disabled="!hasPostBtn" :placeholder="`請輸入${form.name}`"
							:placeholderStyle="placeholderStyle" v-model="model['value' + index]"
							type="number"></u-input>
					</u-form-item>

					<u-form-item v-if="form.type === 'image'" :labelStyle="labelStyle" :prop="`value${index}`"
						:label="form.name" label-position="top" label-width="150" :borderBottom="true">
						<u-upload :deletable="hasPostBtn" :placeholderStyle="placeholderStyle" :showProgress="false"
							@on-uploaded="uploadSuccess($event, `value${index}`)"
							@on-remove="uploadRemove($event, `value${index}`)" :file-list="model[`valueList${index}`]"
							:action="`${$BASE_URL}/api/common/upload`" :header="{token: token}" width="148" height="148"
							maxCount="1"></u-upload>
					</u-form-item>



				</block>
				<u-form-item :labelStyle="labelStyle" label-position="left" label="国家" label-width="150">
					<view class="u-flex u-row-between">

						<view class="u-flex list-val" @tap="showPopup=true">
							<view class="" style="width:100px;">
								{{ selectValue.name || "请选择国家" }}
							</view>
							<text class="u-iconfont uicon-arrow-right list-val"
								style="color:#999;margin-left:200px;"></text>
						</view>


					</view>
				</u-form-item>
				<view class="agreement u-flex">
					備注：需要先申請成爲會員並且購買壹單才可以申請。
				</view>
				<view class="agreement u-flex" v-if="protocol && hasPostBtn">
					<u-checkbox v-model="model.agreement" activeColor="#b095ff" shape="circle"
						@change="onAgreement"></u-checkbox>
					<view class="agreement-text"
						@tap="$Router.push({ path: '/pages/public/richtext', query: { id: protocol.richtext_id } })">
						我已閱讀並遵守
						<text class="text-underline">{{ protocol.name }}</text>
					</view>
				</view>
				<button class="u-reset-button save-btn" v-if="hasPostBtn" @tap="onSubmit"
					:disabled="isFormEnd">確認提交</button>
			</u-form>
		</view>
		<u-popup v-model="showPopup" mode="bottom" width="750" :closeable="closeable" height="100%"
			close-icon-pos="top-right" close-icon-size="35">
			<index-list :isBigData="enableBigData" @select-item="selectHandler"></index-list>
		</u-popup>
		<!-- 输码弹窗 -->
		<u-popup v-model="showInputModal" mode="center" :closeable="true" close-icon-pos="top-left" border-radius="20">
			<view class="modal-box u-flex-col u-col-center">
				<view class="modal-head u-flex-col u-col-center">
					<image class="modal-head-img" :src="$IMG_URL + '/imgs/modal/store_check.png'" mode=""></image>
					<text class="modal-head-title">分销码</text>
				</view>
				<view class="inp">
					{{invite_code}}
				</view>
				<!-- <input class="inp" type="number" v-model="userInfo.invite_code" placeholder="在此输入分销码" placeholder-class="pl-inp" readonly/> -->
				<button class="u-reset-button post-btn" @tap="showcode(invite_code)">确认</button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from "vuex";
	import IndexList from "@/components/index-list/index";
	export default {
		components: {
			IndexList
		},
		data() {
			return {
				showInputModal:true,
				invite_code:'',
				selectValue: {
					name: "香港(中国)",
				},
				country: '',
				closeable: true,
				enableBigData: false,
				showPopup: false,
				checkboxValue1: [],
				// 基本案列数据
				checkboxList1: [{
						name: '苹果',
						disabled: false
					},
					{
						name: '香蕉',
						disabled: false
					},
					{
						name: '橙子',
						disabled: false
					}
				],
				formList: [], //返回的表單
				formHeadImg: '', //表單頭部背景
				protocol: null, //協議
				isFormEnd: false, //提交成功
				hasPostBtn: false, //是否顯示提交按鈕
				errorType: ['message'],
				labelStyle: {
					'font-size': '28rpx',
					'font-weight': '500',
					color: '#333'
				},
				placeholderStyle: 'font-size: 28rpx;color:#c4c4c4;',
				model: {
					agreement: true,
				},
				inputNumber: [{
					required: true,
					message: '內容不能爲空！',
					trigger: ['change', 'blur']
				}],
				inputImage: [{
					required: true,
					message: '請上傳圖片',
					trigger: ['change', 'blur']
				}],
				rules: {},
				token: uni.getStorageSync('token')
			};
		},
		computed: {
			...mapGetters(["userInfo", "authType"])
		},
		onLoad() {
			this.getFrom();
		},
		methods: {
			selectHandler(e) {
				console.log(e, '---ee');
				this.showPopup = false;
				this.selectValue = e;
				console.log(this.selectValue)
			},
			// 上傳圖片成功-單圖
			uploadSuccess(e, value) {
				this.model[value] = e[0].response.data.url;
			},

			// 移除圖片
			uploadRemove(index, value) {
				this.model[value] = '';
			},

			// 勾選同意
			onAgreement(e) {
				this.model.agreement = e.value;
			},

			// 獲取申請分銷商表單
			getFrom() {
				let that = this;
				that.$http('commission.form').then(res => {
					if (res.code === 1) {
						that.protocol = res.data.apply_protocol; //表單協議同
						that.formList = res.data.apply_info; //表單
						that.hasPostBtn = res.data.apply_status; //是否顯示提交按鈕
						that.formHeadImg = res.data.background_image ? res.data.background_image : this.$IMG_URL +
							'/imgs/commission/apply_bg.png'; //頭部背景
						that.initRules(); //規則
						that.$refs.uForm.setRules(that.rules);
					}
				});
			},

			// 構建驗證規則
			initRules() {
				let that = this;
				that.formList.forEach((item, index) => {
					that.model = {
						...that.model,
						...{
							[`value${index}`]: item.value ? item.value : null
						}
					}; //構造model數據
					that.model.agreement = false;
					if (item.type === 'input' || item.type === 'number') {
						//構造表單驗證規則
						that.rules = {
							...that.rules,
							...{
								[`value${index}`]: that.inputNumber
							}
						};
					}
					if (item.type === 'image') {
						if (item.value) {
							let arr = [];
							arr.push({
								url: item.value
							});
							that.model = {
								...that.model,
								...{
									[`valueList${index}`]: arr
								}
							};
						}

						that.rules = {
							...that.rules,
							...{
								[`value${index}`]: that.inputImage
							}
						};
					}
				});
			},
			showcode(value) {

				uni.setClipboardData({
					data: value, //要被复制的内容
					success: (res) => { //复制成功的回调函数
						console.log(res)

						uni.showToast({ //提示
							title: '复制成功'
						})

						uni.redirectTo({
							url: '/pages/app/commission/index'
						})

					}
				});
			},

			//申請分銷商
			applyCommission(data) {
				let that = this;
				that.isFormEnd = true;
				that.$http(
					'commission.apply', {
						data: data
					},
					'申請中...'
				).then(res => {
					that.isFormEnd = false;
					if (res.code === 1) {

						that.invite_code = "分销商账号：D" + this.userInfo.area_code + this.userInfo.mobile;
						that.showInput = true;

						// uni.showModal({
						// 	title: '分销商申请成功',
						// 	content: "分销商账号：D" + this.userInfo.area_code + this.userInfo.mobile,
						// 	cancelText: "取消", // 取消按钮的文字
						// 	confirmText: "确认", // 确认按钮的文字
						// 	showCancel: true, // 是否显示取消按钮，默认为 true
						// 	confirmColor: '#f55850',
						// 	cancelColor: '#39B54A',
						// 	success: (res) => {
						// 		if (res.confirm) {
						// 			console.log('comfirm') //点击确定之后执行的代码
						// 			// that.$Router.back();
						// 			uni.redirectTo({
						// 				url:'/pages/app/commission/index'
						// 			})
						// 		} else {
						// 			console.log('cancel') //点击取消之后执行的代码
						// 		}
						// 	}
						// })
					}
				});
			},

			// 提交
			onSubmit() {
				let that = this;
				this.$refs.uForm.validate(valid => {
					if (valid) {
						if (!this.model.agreement && this.protocol) return this.$u.toast('請勾選協議');
						let formData = this.formList;
						formData.map((item, index) => {
							item.value = that.model[`value${index}`];
						});
						this.applyCommission(formData);
					} else {
						this.$u.toast('請完善表單');
					}
				});
			}
		}
	};
</script>

<style lang="scss">
	// 输码弹窗
	.modal-box {
		background: #fff;
		width: 610rpx;
		margin: 0 auto;
		border-radius: 20rpx;

		.modal-head {
			width: 100%;

			.modal-head-img {
				width: 100%;
				height: 213rpx;
			}

			.modal-head-title {
				font-size: 35rpx;

				font-weight: bold;
				color: #343434;
				line-height: 42rpx;
			}
		}

		.inp {
			width: 501rpx;
			text-align: center;
			height: 78rpx;
			line-height: 78rpx;
			// border: 1rpx solid #e5e5e5;
			// margin: 60rpx auto 40rpx;
			font-size: 28rpx;

			font-weight: 900;
			color: #6d5028;
			padding-left: 20rpx;

			.pl-inp {
				color: #9a9a9a;
			}
		}

		.post-btn {
			width: 492rpx;
			line-height: 70rpx;
			background: linear-gradient(90deg, #2eae9c, #6cc29f);
			box-shadow: 0px 7rpx 6rpx 0px rgba(#6cc29f, 0.22);
			border-radius: 35rpx;
			font-size: 28rpx;

			font-weight: 500;
			color: rgba(255, 255, 255, 1);
			padding: 0;
			margin-bottom: 60rpx;
		}
	}

	.list-val {
		color: #999;
		font-size: 28rpx;
		text-align: right;
	}

	.apply-commission-wrap {
		height: 100%;
		background-color: #fff;

		.head-box {
			width: 100%;
			height: 400rpx;
			background-size: 100% auto;
			background-repeat: no-repeat;
		}
	}

	// 表單
	.apply-form {
		width: 750rpx;
		background: #ffffff;
		border-radius: 20rpx;
		padding: 30rpx;

		.agreement {
			margin-top: 20rpx;

			.agreement-text {
				font-size: 24rpx;
				font-weight: 500;
				color: #b095ff;

				.text-underline {
					text-decoration: underline;
				}
			}
		}

		.save-btn {
			width: 690rpx;
			line-height: 86rpx;
			background: linear-gradient(-90deg, #a36fff, #5336ff);
			box-shadow: 0px 7rpx 11rpx 2rpx rgba(124, 103, 214, 0.34);
			border-radius: 43rpx;
			font-weight: 500;
			color: #ffffff;
			margin: 30rpx auto;
		}
	}
</style>